<template>
  <view class="me">
    <view class="content header">
      <image class="logo" src="../../static/logo.png"></image>
      <text class="title">{{ title }}</text>
    </view>
    <view class="content container">
      <uni-card class="border" v-if="userAccount === ''">
        <button type="warn" @click="goto('/pages/login/index')">去登录</button>
      </uni-card>
      <uni-card class="border" v-else>
        <text class="title">{{ userAccount }}</text>
      </uni-card>
<!--      <uni-card class="border">-->
<!--        <button type="primary" @click="goto('/pages/userInfo/index')">查看我的信息</button>-->
<!--      </uni-card>-->
      <uni-card class="card">
        <uni-list>
          <uni-list-item title="查看我的信息" showArrow clickable  @click="goto('/pages/userInfo/index')" />
          <uni-list-item title="应用详情" clickable  @click="appDetailHandle" />
          <uni-list-item title="退出登录" showArrow link="redirectTo" to="./chat" @click="logoutHandle" />
        </uni-list>
      </uni-card>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
import {LOGIN_EVENT, USER_TOKEN_KEY} from "@/constants/sysConstants";
import {userLogoutUsingPost} from "@/servers/api/userController";

export default Vue.extend({
  data() {
    return {
      title: '聚合平台',
      userAccount: '',
    }
  },
  onLoad() {
    this.initUserData();
    this.initEvent();
  },
  methods: {
    initEvent() {
      uni.$on(LOGIN_EVENT, () =>{
        this.initUserData()
      })
    },
    initUserData() {
      try {
        const value = uni.getStorageSync(USER_TOKEN_KEY);
        this.userAccount = value;
      } catch (e) {
        // error
      }
    },
    goto(to: any) {
      uni.navigateTo({
        url: to
      })
    },
    appDetailHandle() {
      uni.showToast({
        icon: 'none',
        title: '待开发',
        duration: 2000
      });
    },
    async logoutHandle() {
      const res = await userLogoutUsingPost();
      if (res) {
        uni.setStorageSync(USER_TOKEN_KEY, '');
        this.initUserData();
        uni.showToast({
          title: '退出登录',
          mask: true,
          duration: 2000
        });
      }
    }
  }
});
</script>

<style>
.me {
  margin: 5px auto;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.header {
  margin-top: -30px;
}

.container {
  margin-top: 30rpx;
  .border{

  }
  .card{
    margin: 5px;
    width: 90%;
  }
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #3077c9;
}
</style>
